<template>
	<view class="relative bullet-chat-packbox">
		<!-- <image 
			v-if="commonConfigs && commonConfigs.domainFrontFileLink && useSence === 'newerborn'" 
			:src="`${commonConfigs.domainFrontFileLink}/files/images/newerbornZone/icon-gonggao.png`" 
			class="broadcast-img absolute" /> -->

		<view
			class="bubbet-chat-box flex-direction-column flex-justify-content-between"
			:style="{
				width: (useSence === 'tabHome' ? '94%' : trackInfo.trackWidthContent + 'rpx'),
				height: trackInfo.trackHeightContent + 'rpx'
			}"
		>
			<view
				v-for="(it, index) in trackNums"
				:key="index"
				:id="`process-${index + 1}`"
				class="flex-align-items-center relative"
				:style="{ height: trackInfo.trackHeightItem + 'px' }"
			>
				<view class="bubbet-chat-info absolute text-nowrap" v-for="(item, num) in bulletChatInfo[`process-${index + 1}`]" :key="item.id" :id="item.id">
					
					<view :class="['info-box', 'relative', useSence === 'newerborn' ? 'newer-box' : '']">
						<image class="bg"
							v-if="commonConfigs && commonConfigs.domainFrontFileLink"
							:src="`${commonConfigs.domainFrontFileLink}/files/images/home/danmu-item-bg.png`" />
						
						<view :class="['relative', 'info-head', useSence === 'newerborn' ? 'newer-box' : '']">
							<image :src="item.avatar" class="info-head-img absolute" mode="aspectFit"></image>
						</view>
						
						<text class="info-box-txt">
							<text style="color: #FFFFFF;">{{ item.nickname || '微信昵称' }}</text>
							<text style="margin: 0 4rpx;">获得</text>
							<text :style="{ color: item.reward_item_type_color || '#79F6FF', margin: '0 4rpx' }">{{ item.reward_item_type }}</text>
							<text :style="{ color: '#79F6FF' }">{{ item.reward_item_name }}</text>
						</text>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'comBulletChat',
		props: {
			useSence: {
				type: String,
				default: () => ''
			},
			bulletChatRecordData: {
				type: Array,
				default: () => []
			},
		},
		data() {
			return {
				trackNums: 2, // 弹幕轨道数量
				trackInfo: {
					trackMaxContent: 20, // 弹幕最大保存数量，超过之后从头部开始删除
					trackWidthContent: 602, // 容器宽度
					trackHeightContent: 108, // 容器高度
					trackHeightItem: 54, //一条弹幕容器高度
				},
				PerTrackList: [], // 弹幕轨道状态数组
				bulletChatInfo: {}, // 弹幕项目信息
				bulletChatList: [], // 弹幕项目列表
			};
		},
		computed: {
			commonConfigs() {
				return this.$store.getters.commonConfigs || {};
			}
		},
		created() {
			this.setBulletChatFun();
		},
		destroyed() {
			this.bulletChatList = [];
			this.PerTrackList = [];
			this.bulletChatInfo = {};
		},
		watch: {
			bulletChatList(val) {
				if (val.length) {
					this.selectBulletChatFun(val);
				} else {
					return this.$emit('getLastBulletChatFun', true);
				}
			},
			
			bulletChatRecordData: {
				handler(v) {
					v.forEach((item) => {
						this.setJoinBulletChatFun(item);
					})
				},
				immediate: true
			},
		},
		methods: {
			setJoinBulletChatFun(
				val = {
					content: '旺卡抽赏'
				}
			) {
				if (this.bulletChatList.length >= this.trackInfo.trackMaxContent) {
					this.bulletChatList.shift()

				}
				if (val instanceof Object) {
					this.bulletChatList.push({
						...val,
						content: val.nickname,
						id: this.getUniqFun(),
					})

				} else {
					this.bulletChatList.push({
						...val,
						content: val,
						id: this.getUniqFun(),
					});
				}
			},
			
			selectBulletChatFun() {
				if (!this.bulletChatList.length) {
					return;
				}
		
				if (this.PerTrackList.includes(true)) {
					let bubbetChatIndex;

					if (this.PerTrackList.every((item) => item)) {
						bubbetChatIndex = Math.floor(Math.random() * this.trackNums) + 1;
					} else {
						bubbetChatIndex = this.PerTrackList.findIndex((item) => item) + 1;
					}
					
					this.setPushBulletChatFun(bubbetChatIndex);
				}
				return false;
			},
			
			setBulletChatFun() {
				this.trackNums = Math.floor(this.trackInfo.trackHeightContent / this.trackInfo.trackHeightItem);
				
				for (var key = 0; key < this.trackNums; key++) {
					this.PerTrackList.push(true);
					this.bulletChatInfo[`process-${key + 1}`] = [];
				}
			},
			
			setPushBulletChatFun(bubbetChatIndex) {
				const data = this.bulletChatList.shift();
				this.bulletChatInfo[`process-${bubbetChatIndex}`].push(data);
				this.bulletChatInfo = JSON.parse(JSON.stringify(this.bulletChatInfo));

				this.PerTrackList[bubbetChatIndex - 1] = false;
				var query = uni.createSelectorQuery().in(this);

				let currentBarrageWidth;
				
				this.$nextTick(() => {
					query
						.selectAll(`.bubbet-chat-info`)
						.boundingClientRect((rect) => {
							try {
								currentBarrageWidth = Math.ceil(rect.find((item) => item.id === data.id).width)

								let oneTimer = setTimeout(() => {
									clearTimeout(oneTimer);
									oneTimer = null;
									this.PerTrackList[bubbetChatIndex - 1] = true

									this.selectBulletChatFun();
								}, Math.ceil((currentBarrageWidth / (2000 / 26)) * 1000 + 200));
							} catch (error) {
								this.PerTrackList[bubbetChatIndex - 1] = true

								this.bulletChatInfo[`process-${bubbetChatIndex}`].pop();
								this.selectBulletChatFun();
							}
						})
						.exec();
				})

				let secTimer = setTimeout(() => {
					clearTimeout(secTimer);
					secTimer = null;
					this.bulletChatInfo[`process-${bubbetChatIndex}`] && this.bulletChatInfo[`process-${bubbetChatIndex}`].shift();
					this.bulletChatInfo = JSON.parse(JSON.stringify(this.bulletChatInfo));
				}, 20 * 1000);
			},
			
			getUniqFun() {
				return (Math.random() + new Date().getTime()).toString(32).slice(0, 16);
			},
			
		}
	};
</script>

<style scoped lang="scss">
	.bullet-chat-packbox {
		.broadcast-img {
			width: 44rpx;
			height: 37rpx;
			top: 10rpx;
			left: 0rpx;
		}
		
		.bubbet-chat-box {
			margin: auto;
			overflow: hidden;
			
			.bubbet-chat-info {
				display: inline-flex;
				animation: bulletChatAni 24s linear;
				color: #FFF;
				display: inline-block;
				left: calc(100% + 6rpx);
				height: 54rpx;
				line-height: 54rpx;
				border-radius: 30rpx;
				
				@keyframes bulletChatAni {
					from {
						transform: translate(0);
					}
				
					to {
						transform: translate(-1800px);
					}
				}
				
				.info-box {
					font-size: 20rpx;
					color: #FFF;
					display: inline-flex;
					align-items: center;
					vertical-align: middle;
					height: 64rpx;
					line-height: 64rpx;
					padding: 0 16rpx;
					box-sizing: border-box;
					border-radius: 34rpx;
					overflow: hidden;
					&.newer-box {
						height: 64rpx;
						line-height: 64rpx;
						
					}
					
					.info-box-txt {
						display: inline-block;
						margin-right: 10rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						color: #FFFFFF;
						font-size: 20rpx;
						// padding-left: 40rpx;
						padding-right: 30rpx;
						margin-top: -10rpx;
					}
				}
				
				.info-head {
					margin-right: 10rpx;
					display: inline-block;
					width: 44rpx;
					height: 44rpx;
					
					.info-head-img {
						width: 44rpx;
						height: 44rpx;
						border-radius: 100%;
						left: 0rpx;
						bottom: 4rpx;
					}
					
					&.newer-box {
						width: 44rpx;
						height: 44rpx;
						
						.info-head-img {
							width: 100%;
							height: 100%;
						}
					}
				}
				
			}
		}
		
	}
</style>
